<template>
    <el-main>
      <h1>用户管理</h1>
      <el-rate class="ml-1" />
      <el-row>
        <el-form :model="like">
          <el-form-item
              label="名称"
          >
            <el-input
                v-model="like.name"
                type="text"
                autocomplete="off"
            />
          </el-form-item>

        </el-form>
        <el-button type="primary" @click="submitLike(like.name)">查询</el-button>
        <el-button type="primary" @click="add()">增加</el-button>
      </el-row>


      <el-table :data="tableData"
                style="width: 100%">
        <el-table-column label="ID" width="200">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="登录名" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">
                  {{ scope.row.loginName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="密码" width="300">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.password }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handlePassword(scope.$index, scope.row)" type="success"
            >EditPassword</el-button
            >
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >EditName</el-button
            >
            <el-popconfirm
                confirm-button-text="Yes"
                cancel-button-text="No"
                title="确定要删除吗?"
                @confirm="confirmEvent(scope.row.id)"
            >
              <template #reference>
                <el-button
                    size="small"
                    type="danger"
                >Delete</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="currentPage3"
          v-model:page-size="pageSize3"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="prev, pager, next, jumper,total,->,consists of sizes"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
      <el-dialog v-model="dialogFormVisible" title="用户表单">
        <el-form :model="form" :rules="rules" ref="ruleFormRef">
          <el-form-item label="登录名" :label-width="formLabelWidth" prop="loginName">
            <el-input v-model="form.loginName" autocomplete="off" :disabled="!!form.id"/>
          </el-form-item>
          <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop="password" v-show="!form.id">
            <el-input v-model="form.password" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="update(ruleFormRef)">
          更新
        </el-button>
         </span>
        </template>
      </el-dialog>
      <el-dialog v-model="dialogPassword" title="用户表单">
        <el-form :model="form" :rules="rules" ref="ruleFormRef">
          <el-form-item label="登录名" :label-width="formLabelWidth" prop="loginName">
            <el-input v-model="form.loginName" autocomplete="off" :disabled="!!form.id"/>
          </el-form-item>
          <el-form-item label="新密码" :label-width="formLabelWidth" prop="password">
            <el-input v-model="form.password" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
        <el-button @click="dialogPassword = false">关闭</el-button>
        <el-button type="primary" @click="updatePassword(ruleFormRef)">
          更新
        </el-button>
         </span>
        </template>
      </el-dialog>
    </el-main>

</template>
<script lang="ts" setup>
import { Timer } from '@element-plus/icons-vue'
import {h, onMounted, ref,reactive} from "vue";
import axios from "axios";
import {ElNotification, FormInstance, FormRules} from "element-plus";
import {Tool} from "@/util/tool";
const tableData: User[] = ref()
const currentPage3 = ref(1)
const pageSize3 = ref(10)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const total=ref(10)
const dialogFormVisible = ref(false)
const dialogPassword = ref(false)
const formLabelWidth = '140px'
const ruleFormRef = ref<FormInstance>()
const like = reactive({
  name: '',
})
const form = reactive({
  id:0,
  loginName:'',
  name: '',
  password:'',
})
interface User {
  id:number
  loginName: string
  name: string
  password:string
}
const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ],
  loginName: [
    {
      required: true,
      message: '登录名不能为空',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur',
    },
  ],
})
const handleQuery=(params:any)=>{
  axios({
    method: 'get',
    url: '/user/list',
    // 传递参数
    params: {
      "loginName": params.name,
      "pageNum":params.pageNum,
      "pageSize":params.pageSize,
    },
    // 设置请求头信息
    headers: {

    }
  }).then((response) => {
    tableData.value=response.data.data.data
    total.value=response.data.data.total
  })
}

const confirmEvent=(id:number)=>{
  axios({
    method: 'delete',
    url: '/user/delete/'+id
  }).then((response) => {
    if (response.data.data!==0){
      handleQuery({
        "name":"",
        "pageNum":currentPage3.value,
        "pageSize":pageSize3.value
      })
      open1("teal",response.data.message)
    }else {
      open1("red",response.data.message)
    }
  })
}
const add=()=>{
  dialogFormVisible.value=true
  form.id=0
  form.name=''
  form.loginName=''
  form.password=''
}

const submitLike=(name:string)=>{
  handleQuery({
    "name":name,
    "pageNum":currentPage3.value,
    "pageSize":pageSize3.value
  })
}

const update=async (formEl: FormInstance | undefined)=>{
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let password=hexMd5(form.password+KEY)
      axios({
        method: 'post',
        url: '/user/update',
        // 传递参数
        data: {
          id:form.id,
          loginName: form.loginName,
          name: form.name,
          password:password,
        },
        // 设置请求头信息
        headers: {
          "Content-Type":"application/json"
        }
      }).then((response) => {
        dialogFormVisible.value = false
        if (response.data.data!==0){
          handleQuery({
            "name":"",
            "pageNum":currentPage3.value,
            "pageSize":pageSize3.value
          })
          open1("teal",response.data.message)
        }else {
          open1("red",response.data.message)
        }
      })
    }
  })
}
const updatePassword=async (formEl: FormInstance | undefined)=>{
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let password=''
      if (form.password){
        password=hexMd5(form.password+KEY)
      }

      axios({
        method: 'post',
        url: '/user/updatePassword',
        // 传递参数
        data: {
          id:form.id,
          loginName: form.loginName,
          name: form.name,
          password:password,
        },
        // 设置请求头信息
        headers: {
          "Content-Type":"application/json"
        }
      }).then((response) => {
        dialogPassword.value = false
        if (response.data.data!==0){
          handleQuery({
            "name":"",
            "pageNum":currentPage3.value,
            "pageSize":pageSize3.value
          })
          open1("teal",response.data.message)
        }else {
          open1("red",response.data.message)
        }
      })
    }
  })

}
onMounted(()=>{
  handleQuery({
    "name":"",
    "pageNum":currentPage3.value,
    "pageSize":pageSize3.value
  })
})
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage3.value=val
  handleQuery({
    "name":"",
    "pageNum":currentPage3.value,
    "pageSize":pageSize3.value
  })

}
const handleEdit = (index: number, row: User) => {
  dialogFormVisible.value=true
  form.id=row.id
  form.loginName=row.loginName
  form.name=row.name
  form.password=row.password
}
const handlePassword = (index: number, row: User) => {
  dialogPassword.value=true
  form.id=row.id
  form.loginName=row.loginName
  form.name=row.name
  form.password=''
}
const open1 = (color:string,msg:string) => {
  ElNotification({
    title: '消息',
    message: h('i', { style: 'color: '+color }, msg),
    duration:3000,
  })
}
</script>
<style scoped>

</style>

